<script  lang="ts" setup name="Person">
    import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from "vue";
    let sum = ref(0)
    function addSum (){
      sum.value += 1
    }
    //创建
    console.log('子--创建')

    //挂载前
    onBeforeMount(()=>{
      console.log('子--挂载前')
    })
    //挂载后
    onMounted(()=>{
      console.log('子--挂载后')
    })
    //更新前
    onBeforeUpdate(()=>{
      console.log('子--更新前')
    })
    //更新后
    onUpdated(()=>{
      console.log('子--更新后')
    })
    //卸载前
    onBeforeUnmount(()=>{
      console.log('子--卸载前')
    })
    //卸载后
    onUnmounted(()=>{
      console.log('子--卸载后')
    })
</script>

<template>
  <div class="prisonBox">
     <h2>当前求和为：{{sum}}</h2>
    <button @click="addSum">点击+1</button>
  </div>
</template>

<style scoped>
    .prisonBox{
      background-color:skyblue;
      padding: 20px;
      box-shadow: 0 0 10px;
      font-size: 20px;
      border-radius: 20px;
      button{
        margin: 0 10px;
      }
    }
</style>